<script setup>
import ItemTodoContainer from './item-todo-container.vue';
import ItemDoneContainer from './item-done-container.vue';

const activeName = ref('todo');

provide('activeName', activeName);
const emit = defineEmits('tab-click', { activeName: activeName.value });

const handleClick = (tab) => {
  activeName.value = tab.paneName;
  emit('tab-click', activeName.value);
};
</script>

<template>
  <div class="contain">
    <el-tabs v-model="activeName" class="tabs" @tab-click="handleClick">
      <el-tab-pane name="todo">
        <template #label>
          <span class="custom-tabs-label">
            <span>我的待办</span>
          </span>
        </template>
        <item-todo-container></item-todo-container>
      </el-tab-pane>
      <el-tab-pane name="done">
        <template #label>
          <span class="custom-tabs-label">
            <span>我的已办</span>
          </span>
        </template>
        <item-done-container></item-done-container>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style lang="scss" scoped>
.contain {
  width: 1368px;
  margin-top: 20px;
  background: #fff;
  border-radius: 5px;

  .tabs {
    padding: 0;
    margin-top: 8px;

    :deep(.el-tabs__header) {
      margin: 0;
      padding: 0 25px;
    }

    .custom-tabs-label {
      font-size: 14px;
      font-weight: 500;
      line-height: 18px;
      margin-top: -8px;
    }
  }
}
</style>
